<template>
  <div class="notes" v-if="notes">
    <section class="recommend" title="推荐笔记">
      <div class="item" v-for="(tags, i) in notes.topics" :key="i">
        <div>
          <span v-for="(tag, index) in tags" :key="index">#{{ tag.name }}</span>
        </div>
      </div>
    </section>
    <section class="content" title="笔记">
      <div class="left">
        <NoteItem
          v-for="(item, index) in showList[0]"
          :key="item.id + '' + index"
          :item="item"
        />
      </div>
      <div class="right">
        <NoteItem
          v-for="(item, index) in showList[1]"
          :key="item.id + '' + index"
          :item="item"
        />
      </div>
    </section>
  </div>
</template>

<script>
import NoteItem from "@/components/NoteItem.vue";
export default {
  components: {
    NoteItem,
  },
  data: () => {
    return {
      notes: null,
      leftHeight: 0,
      rightHeight: 0,
    };
  },
  computed: {
    showList() {
      let cat = [[], []];
      this.notes.list.map((item) => {
        let width = item?.activity?.image_w || item?.note.image_w;
        let scale = width / 750;
        let height = item?.activity?.image_h || item?.note.image_h;
        height = Number.parseInt(height)/scale;
        if (this.leftHeight <= this.rightHeight) {
          cat[0].push(item);
          this.leftHeight += height;
        } else {
          cat[1].push(item);
          this.rightHeight += height;
        }
      });
      return cat;
    },
  },
  methods: {
    getNotes() {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/home/notes/0/20`,
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        this.notes = res.data.result;
        this.leftHeight = 0;
        this.rightHeight = 0;
      });
    },
  },
  created() {
    this.getNotes();
  },
};
</script>

<style lang="scss" scoped>
.notes {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 0.6rem;
  .recommend {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.1rem;
    .item {
      width: 100%;
      overflow: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      > div {
        width: max-content;
        display: flex;
        align-items: center;
        margin-bottom: 0.1rem;
        > span {
          display: block;
          height: 0.4rem;
          font-size: 0.13rem;
          line-height: 0.4rem;
          text-align: center;
          padding: 0 0.1rem;
          color: var(--text-green2);
          margin-right: 0.05rem;
          border-radius: 0.2rem;
          background-color: var(--bgc-gray);
        }
      }
    }
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.05rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
</style>